<template>
  <content-field>
    <n-card>
      <template #header>
        <back-last />
        合集 <n-text depth="3">#{{ id }} </n-text>&nbsp;

        <n-tag type="info" style="color: #3271ae">
          {{ $store.state.collection.dirt[id].name }}</n-tag
        ></template
      >
      <n-statistic
        :label="`收集${mode == 'essay' ? '动态' : '文章'}数`"
        :value="count"
      >
        <template #prefix> </template>
        <template #suffix> 篇</template>
      </n-statistic>
    </n-card>
    <n-card class="background" embedded>
      <template #header>
        <n-tabs
          type="line"
          v-model:value="mode"
          @update:value="updateContent(mode, id, 1)"
        >
          <n-tab name="essay"> 最近动态 </n-tab>
          <n-tab name="article"> 最近文章</n-tab>
          <n-tab name="content"> 混合 </n-tab>
        </n-tabs>
      </template>
      <template #header-extra>
        <n-pagination
          v-model:page="page"
          :page-count="Math.ceil(count / 10)"
          show-quick-jumper
          :page-slot="6"
        >
          <template #goto> 跳转至 </template>
        </n-pagination>
      </template>
      <div v-if="mode == 'essay'">
        <n-grid :cols="1" y-gap="8">
          <n-gi v-for="essay of contentlist" :key="essay.id"
            ><essay-card :essay="essay"
          /></n-gi>
        </n-grid>
      </div>
      <div v-else-if="mode == 'article'">
        <n-grid :cols="2" :x-gap="12" :y-gap="8">
          <n-gi :span="2" v-for="article of contentlist" :key="article.id">
            <article-card :article="article" />
          </n-gi>
        </n-grid>
      </div>

      <template #footer>
        <n-space justify="end"
          ><n-pagination
            v-model:page="page"
            :page-count="Math.ceil(count / 10)"
            show-quick-jumper
          >
            <template #goto> 跳转至 </template>
          </n-pagination></n-space
        >
      </template>
    </n-card>
  </content-field>
</template>

<script>
import ContentField from "@/components/ContentField.vue";
import { ref } from "@vue/reactivity";
import remoteData from "@/composables/RemoteData";
import { watch } from "@vue/runtime-core";
import { NTab, NTabs } from "naive-ui";
import ArticleCard from "@/components/cards/ArticleCard.vue";
import EssayCard from "@/components/cards/EssayCard.vue";
import BackLast from "@/components/BackLast.vue";

export default {
  props: {
    id: {
      type: [Number, String],
      required: true,
    },
    type: {
      type: String,
      default: "article",
    },
  },

  components: { ContentField, NTabs, NTab, ArticleCard, EssayCard, BackLast },
  setup(props) {
    const { get_articles_with_collection, get_essays_with_collection } =
      remoteData(null);

    let contentlist = ref([]);
    let page = ref(1);
    let count = ref(0);
    const mode = ref("essay");

    const updateContent = (type, id, page) => {
      /**
       * 根据type, id ,page 更新当前视图的列表传
       * 参数不会被更改，传入参数应为具体值
       */
      if (type == "article")
        get_articles_with_collection(page, contentlist, count, id).catch(
          (error) => {
            console.log(error);
          }
        );
      else if (type == "essay")
        get_essays_with_collection(page, contentlist, count, id).catch(
          (error) => {
            console.log(error);
          }
        );
    };

    // 请求初始页
    mode.value = props.type + ""; // 不让直接给，(会失去响应性bulabula 虽然不需要但eslint不给过)
    page.value = 1;
    updateContent(mode.value, props.id, page.value);

    watch(page, (newpage) => {
      updateContent(mode.value, props.id, newpage);
    });

    /**
     * TODO: 当在此页面时，点击跳转到其他集合content页面
     * 会不能正常刷新。
     * 正常操作下，没有触发条件，故放置
     */
    return {
      contentlist,
      page,
      count,
      mode,
      updateContent,
      get_articles_with_collection,
      get_essays_with_collection,
    };
  },
};
</script>

<style>
</style>